﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>泸溪河奥运大数据</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/world.js"></script>
    <link href="../static/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/index.css">
    	<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fantasy Coming Soon Responsive Widget,Login form widgets,
Sign up Web forms , Login signup Responsive web form,
Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- CSS -->
<link href="../static/css/font-awesome.css" rel="stylesheet"><!-- Font-awesome-CSS -->
<!--<link href="../static/css/style1.css" rel='stylesheet' type='text/css'/>-->
<!-- //CSS -->
<!-- Fonts -->
<link href="//fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i&amp;subset=latin-ext" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
<!-- Fonts -->
	<!-- Favicon -->
    <link rel="shortcut icon" href="../static/images/favicon.html">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!-- Icons -->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="../static/css/ilmosys-icon.css">
    <link rel="stylesheet" href="../static/js/vendors/swipebox/css/swipebox.min.css">
    <!-- Theme CSS -->
    <link rel="stylesheet" href="../static/js/vendors/slick/slick.css">
    <!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
    <style>
        .t_title{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #fff;
        }
        #chart_map{
            cursor: pointer;
        }
        .t_show{
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>

<!--header-->
<header>
            <nav class="navbar-inverse navbar-lg navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
<!--                        <a href="#" class="navbar-brand brand"><img src="" alt="logo" width="120px" height="50px" id="logo"></a>-->
                    </div>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				</button>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown mm-menu">
                                <a class="page-scroll" href="/index">主页</a>
                            </li>
                            <li class="dropdown mm-menu">
                                <a class="page-scroll" href="/details" target="_blank">更多数据分析</a>
                            </li>
                            <li class="dropdown mm-menu">
                                <a class="page-scroll" href="/news0" target="_blank">赛事资讯</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
<div class="header">
    <div class="bg_header">
        <div class="header_nav fl t_title">
            <h1><img src="">泸溪河大数据</h1>
        </div> 
    </div>
</div>
<!--main-->
<div class="data_content">
    <div class="data_main">
        <div class="main_center fl">
            <div class="center_text" style="position: relative;cursor: pointer;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                 <!--右下边框-->
                 <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title" style="width: 230px;">
                    <img src="picture/t_3.png" alt="">
                    Score地区分布
                </div>
                <script type="text/javascript" src="../static/nameMap.json"></script>
                <script type="text/javascript" src="../static/color.json"></script>
                <div style="width:100%;height:610px;"><div id="chart_map" style="width:100%;height:100%;"></div></div>
                <!--地图 chart_map-->
                <script>
var chart_map = echarts.init(
document.getElementById("chart_map"), 'white', {renderer: 'canvas'});
var data = {{mapdata|safe}};
var option_map = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": color,
    "series": [
        {
            "type": "map",
            "label": {
                "show": false,
                "position": "top",
                "margin": 8
            },
            "mapType": "world",
            "data": data,
            "roam": true,
            "aspectScale": 0.75,
            "nameProperty": "name",
            "selectedMode": false,
            "zoom": 1,
            "mapValueCalculation": "sum",
            "showLegendSymbol": false,
            "emphasis": {},
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            },
            nameMap:nameMap,
        }
    ],
    legend: [
        {
            data: [
                ""
            ],
            selected: {
                "": true
            },
            show: true,
            padding: 5,
            itemGap: 10,
            itemWidth: 25,
            itemHeight: 14,
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },
    "title": [
        {
            "text": "Scores on Map",
            subtext:"(scores = sum of medals)",
            "padding": 5,
            "itemGap": 10
        }
    ],
    "visualMap": {
        "show": true,
        textStyle: {
                color: '#fff',
                fontSize: 12
            },
        "type": "piecewise",
        "min": 0,
        "max": 120,
        "inRange": {
            "color": [
                "#50a3ba",
                "#eac763",
                "#d94e5d"
            ]
        },
        "calculable": true,
        "inverse": false,
        "splitNumber": 6,
        "orient": "vertical",
        "showLabel": true,
        "itemWidth": 20,
        "itemHeight": 14,
        "borderWidth": 0
    }
};
chart_map.setOption(option_map);
    </script>
            </div>
        </div>
        <style type="text/css">
.linshi_zdy{
    position: absolute;
    right: 0px;
    top: 450px;
}
.linshi_zdy li{
    width: 150px;
    font-size: 16px;
    padding: 3px 8px;
    cursor: pointer;
}
.linshi_zdy span{
    display: block;
    width: 14px;
    height: 14px;
    float: left;
    border-radius: 50%;
    margin-top: 3px;
    margin-right: 5px;
}
.linshi_zdy li:first-child{
    color: #ff0000;
}
.linshi_zdy li:first-child span{
    background: #ff0000;
}
.linshi_zdy li:nth-child(2){
    color: #9cff00;
}
.linshi_zdy li:nth-child(2) span{
    background: #9cff00;
}
.linshi_zdy li:nth-child(3){
    color: #fff;
}
.linshi_zdy li:nth-child(3) span{
    background: #fff;
}
.linshi_zdy li:nth-child(4){
    color: #f4a100;
}
.linshi_zdy li:nth-child(4) span{
    background: #f4a100;
}
</style>
        <div class="main_right fr">
            <div class="right_1">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title" style="width:200px;">
                    <img src="picture/t_5.png" alt="">
                    &emsp;&emsp;金牌
                </div>
                <div id="pie_gold" class="chart" style="width:100%;height: 180px;"></div>
            </div>
            <div class="right_2">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title" style="width:200px;">
                    <img src="picture/t_5.png" alt="">
                    &emsp;&emsp;银牌
                </div>
                <div id="pie_silver" class="chart" style="width:100%;height: 180px;"></div>
            </div>
            <div class="right_3">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                    <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title" style="width:200px;">
                    <img src="picture/t_5.png" alt="">
                    &emsp;&emsp;银牌
                </div>
                <div id="pie_copper" class="chart" style="width:100%;height: 180px;"></div>
            </div>
        </div>
    </div>
    <div class="data_bottom">
        <div class="bottom_1 fl t_btn5" style="width:70%;height:200%;">
            <div class="t_line_box">
                <i class="t_l_line"></i>
                <i class="l_t_line"></i>
            </div>
            <div class="t_line_box">
                <i class="t_r_line"></i>
                <i class="r_t_line"></i>
            </div>
            <div class="t_line_box">
                <i class="l_b_line"></i>
                <i class="b_l_line"></i>
            </div>
                <div class="t_line_box">
                <i class="r_b_line"></i>
                <i class="b_r_line"></i>
            </div>
            <div class="main_title">
                <img src="picture/t_7.png" alt="">
                获奖运动员WH信息
            </div>
            <div id="wh" style="padding:25px;height:100%;width:100%;"></div>
        </div>
        <div class="bottom_1 fl t_btn5" style="padding:5px;width:6%;height:200%";></div>
        <div class="bottom_4 fr" style="height:200%;">
            <div class="t_line_box">
                <i class="t_l_line"></i>
                <i class="l_t_line"></i>
            </div>
            <div class="t_line_box">
                <i class="t_r_line"></i>
                <i class="r_t_line"></i>
            </div>
            <div class="t_line_box">
                <i class="l_b_line"></i>
                <i class="b_l_line"></i>
            </div>
                <div class="t_line_box">
                <i class="r_b_line"></i>
                <i class="b_r_line"></i>
            </div>
            <div class="main_title">
                <img src="picture/t_7.png" alt="">
                热门运动员
            </div>
            <div class="carousel slide" id="carousel-390453" style="padding:15px;width:100%;height:100%;">
                  <ol class="carousel-indicators">
                    <li class="" data-slide-to="0"></li>
                    <li class="" data-slide-to="1"></li>
                    <li class="" data-slide-to="2"></li>
                      <li class="" data-slide-to="3"></li>
                      <li class="" data-slide-to="4"></li>
                      <li class="" data-slide-to="5"></li>
                      <li class="" data-slide-to="6"></li>
                  </ol>
                  <div class="carousel-inner">
                    <div class="item" ><img alt="" src="../static/images/杨倩.png" height="230px" width="340px" hspace="40px">
                        <div style="left:20px;width:440px;height:300px;"><div id="yang" style="left:20px;width:352px;height:240px;"></div></div>
                    </div>
                    <div class="item"><img alt="" src="../static/images/马龙.png" height="230px" width="340px" hspace="40px">
                        <div style="left:20px;width:440px;height:300px;"><div id="long" style="left:20px;width:352px;height:240px;"></div></div>
                    </div>
                    <div class="item"> <img alt="" src="../static/images/孙颖莎.png" height="230px" width="340px" hspace="40px">
                        <div style="left:20px;width:440px;height:300px;"><div id="sha" style="left:20px;width:352px;height:240px;"></div></div>
                    </div>
                      <div class="item" ><img alt="" src="../static/images/苏炳添.png" height="230px" width="340px" hspace="40px">
                        <div style="left:20px;width:440px;height:300px;"><div id="su" style="left:20px;width:352px;height:240px;"></div></div>
                    </div>
                    <div class="item"><img alt="" src="../static/images/许昕.png" height="230px" width="340px" hspace="40px">
                        <div style="left:20px;width:440px;height:300px;"><div id="xu" style="left:20px;width:352px;height:240px;"></div></div>
                    </div>
                    <div class="item"> <img alt="" src="../static/images/全红禅.png" height="230px" width="340px" hspace="40px">
                        <div style="left:20px;width:440px;height:300px;"><div id="qhc" style="left:20px;width:352px;height:240px;"></div></div>
                    </div>
                    <div class="item active"> <img alt="" src="../static/images/陈梦.png" height="230px" width="340px" hspace="40px">
                        <div style="left:20px;width:440px;height:300px;"><div id="cm" style="left:20px;width:352px;height:240px;"></div></div>
                    </div>
                  </div>
                  <a data-slide="prev" href="#carousel-390453" class="left carousel-control">‹</a>
                  <a data-slide="next" href="#carousel-390453" class="right carousel-control">›</a>
                </div>
    </div>
        <div class="bottom_center fl" style="width:100%">
            <div class="bottom_1 fl t_btn5" style="width:60%;height:180%";>
            <div class="t_line_box">
                <i class="t_l_line"></i>
                <i class="l_t_line"></i>
            </div>
            <div class="t_line_box">
                <i class="t_r_line"></i>
                <i class="r_t_line"></i>
            </div>
            <div class="t_line_box">
                <i class="l_b_line"></i>
                <i class="b_l_line"></i>
            </div>
                <div class="t_line_box">
                <i class="r_b_line"></i>
                <i class="b_r_line"></i>
            </div>
            <div class="main_title">
                <img src="picture/t_7.png" alt="">
                获奖运动员年龄分布
            </div>
            <div id="age" style="padding:25px;height:100%;width:100%;"></div>
        </div>
            <div class="bottom_1 fl t_btn5" style="width:40%;height:180%;">
            <div class="t_line_box">
                <i class="t_l_line"></i>
                <i class="l_t_line"></i>
            </div>
            <div class="t_line_box">
                <i class="t_r_line"></i>
                <i class="r_t_line"></i>
            </div>
            <div class="t_line_box">
                <i class="l_b_line"></i>
                <i class="b_l_line"></i>
            </div>
                <div class="t_line_box">
                <i class="r_b_line"></i>
                <i class="b_r_line"></i>
            </div>
            <div class="main_title">
                <img src="picture/t_7.png" alt="">
                获奖运动员性别比例
            </div>
            <div id="sex_2020" style="height:5%;"></div>
            <div id="sex_history" style="height:90%;"></div>

            </div>
        </div>
    </div>
    <div class="data_bottom">
        <div class="bottom_2 fl" style="top:230px;width:100%;height:250%;">
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="picture/t_7.png" alt="">
                    东京奥运会项目情况
                </div>
                <div id="pie_items" style="width:100%;height:100%;"></div>
        </div>
    </div>
    <div class="data_bottom">
        <div class="bottom_2 fl" style="top:230px;width:100%;height:250%;">
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="picture/t_7.png" alt="">
                    中国获奖项目情况
                </div>
            <div style="width:100%;height:100%;">
                <div style="width:50%;height:100%;float:left;">
                    <div id="pie_items_CHN" style="width:90%;height:100%;"></div>
                </div>
                <div style="width:50%;height:100%;float:right;">
                    <div id="pie_items_CHN_G" style="width:90%;height:33%"></div>
                    <div id="pie_items_CHN_S" style="width:90%;height:34%"></div>
                    <div id="pie_items_CHN_C" style="width:90%;height:33%"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
</body>
<script src="../static/js/jquery-2.2.1.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/common.js"></script>
<script src="../static/js/echarts.min.js"></script>
<script src="../static/js/datatool.js"></script>
<script src="../static/js/index.js"></script>
<!-- <script src="scripts/china.js"></script> -->
<script src="../static/js/guangxi.js"></script>
<script type="text/javascript" src="../static/items.json"></script>
<script type="text/javascript" src="../static/items_CHN.json"></script>
<script type="text/javascript" src="../static/items_CHN_G.json"></script>
<script type="text/javascript" src="../static/items_CHN_S.json"></script>
<script type="text/javascript" src="../static/items_CHN_C.json"></script>
<!--柱状图 运动员年龄分布-->
<script type="text/javascript">
var data1 = {{ age_male|safe }};
var data2 = {{ age_female|safe }};
var chartDom = document.getElementById('age');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        textStyle:{
            color:'yellow', //颜色
            fontSize:20,     //大小
            align:'right'   //水平对齐
        },
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Male', 'Female']
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ['<=14', '14~18', '18~22', '23~27', '28~32', '32~36', '>=37']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Male',
            type: 'bar',
            data: data1,
            markPoint: {
                data: [
                    {type: 'max', name: '分布最多'},
                    {type: 'min', name: '分布最少'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: 'Female',
            type: 'bar',
            color:'#b2d235',
            data: data2,
            markPoint: {
                data: [
                    {type: 'max', name: '分布最多'},
                    {type: 'min', name: '分布最少'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--timeline 柱状图 年龄分布-->
<script type="text/javascript">
var chartDom = document.getElementById('age');
var myChart = echarts.init(chartDom);
var option;
var age_2000_m={{age_2000_m|safe}};
var age_2000_f={{age_2000_f|safe}};
var age_2004_m={{age_2004_m|safe}};
var age_2004_f={{age_2004_f|safe}};
var age_2008_m={{age_2008_m|safe}};
var age_2008_f={{age_2008_f|safe}};
var age_2012_m={{age_2012_m|safe}};
var age_2012_f={{age_2012_f|safe}};
var age_2016_m={{age_2016_m|safe}};
var age_2016_f={{age_2016_f|safe}};
option = {
    title: {
        text: '获奖运动员年龄分布',
        subtext: '数据源自统计'
    },
    timeline: {
	            axisType: 'category',
	            // realtime: false,
	            // loop: false,
	            autoPlay: true,
	            // currentIndex: 2,
	            playInterval: 6000,
	            controlStyle: {
	                 position: 'bottom',
	             },
	            data: [
	                '2000','2004','2008','2012', '2016',
	            ],
	            label: {
	                textStyle: {
                    color: '#f47920',  //更改坐标轴文字颜色
                    fontSize : 14      //更改坐标轴文字大小
                    },
	                formatter : function(s) {
	                    return (new Date(s)).getFullYear();
	                }
	            }
	        },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Male', 'Female']

    },
    toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    options:[

        {
            title : {text: '2000'},
            xAxis: [
        {
            type: 'category',
            data: ['<=14', '14~18', '18~22', '23~27', '28~32', '32~36', '>=37'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'white',  //更改坐标轴文字颜色
                    fontSize : 14      //更改坐标轴文字大小
                }
            },
            axisLine:{
			    show:true,
			    lineStyle:{
				    color:'green',  //坐标轴的颜色
			    },
		    },
        }
    ],
            yAxis: [
        {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                color: 'white',  //更改坐标轴文字颜色
                fontSize : 14      //更改坐标轴文字大小
                }
            },
            axisLine:{
			    show:true, //隐藏坐标轴
			    lineStyle:{
				    color:'#0087ED',  //坐标轴的颜色
				}
			},
        }
    ],
            series: [
            {
                name: 'Male',
                type: 'bar',
                data: age_2000_m,
            },
            {
            name: 'Female',
            type: 'bar',
            data: age_2000_f,
            }
            ]
        },
         {
            title : {text: '2004'},
            series: [
            {
                name: 'Male',
                type: 'bar',
                data: age_2004_m,
            },
            {
            name: 'Female',
            color:'#b2d235',
            type: 'bar',
            data: age_2004_f,
            }
            ]
         },
         {
            title : {text: '2008'},
            series: [
            {
                name: 'Male',
                type: 'bar',
                data: age_2008_m,
            },
            {
            name: 'Female',
            type: 'bar',
            data: age_2008_f,
            }
            ]
         },
         {
            title : {text: '2012'},
            series: [
            {
                name: 'Male',
                type: 'bar',
                data: age_2012_m,
            },
            {
            name: 'Female',
            type: 'bar',
            data: age_2012_f,
            }
            ]
         },
         {
            title : {text: '2016'},
            series: [
            {
                name: 'Male',
                type: 'bar',
                data: age_2016_m,
            },
            {
            name: 'Female',
            type: 'bar',
            data: age_2016_f,
            }
            ]
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--饼图 pie_items-->
<script type="text/javascript">
var chartDom = document.getElementById('pie_items');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        text: '2020东京奥运会项目情况',
        left:'300',
            textStyle:{
                color:'black', //颜色
                fontSize:20,     //大小
                align:'right'   //水平对齐
                },
            },
    legend: {
        top: 'bottom',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#fff',
           fontSize: 12
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '2020东京奥运会项目情况',
            type: 'pie',
            radius : '75%',
            center: ['50%', '50%'],
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          //console.log(arg);
                          return arg.name +'\r\n'+arg.value+'枚 '+ arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: items
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--饼图 pie_items_CHN-->
<script type="text/javascript">
var chartDom = document.getElementById('pie_items_CHN');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        text: '中国获奖情况',
        left:'center',
            textStyle:{
                color:'white', //颜色
                fontSize:16,     //大小
                align:'center'   //水平对齐
                },
            },
    legend: {
        top: 'bottom',
        x : 'center',
        textStyle: {
           color: '#white',
           fontSize: 12
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '中国获奖情况',
            type: 'pie',
            radius : '75%',
            center: ['50%', '40%'],
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          //console.log(arg);
                          return arg.name +'\r\n'+arg.value+'枚 '+ arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 12,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: items_CHN
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--饼图 pie_items_CHN_G-->
<script type="text/javascript">
var chartDom = document.getElementById('pie_items_CHN_G');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        text: '金牌',
        left:'center',
            textStyle:{
                color:'RED', //颜色
                fontSize:16,     //大小
                align:'right'   //水平对齐
                },
            },
    legend: {
        top: 'bottom',
        orient : 'vertical',
        x : 'right',
        textStyle: {
           color: '#fff',
           fontSize: 12
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '金牌',
            type: 'pie',
            radius : '70%',
            center: ['35%', '50%'],
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          //console.log(arg);
                          return arg.name +'\r\n'+arg.value+'枚 '
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: items_CHN_G
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--饼图 pie_items_CHN_S-->
<script type="text/javascript">
var chartDom = document.getElementById('pie_items_CHN_S');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        text: '银牌',
        left:'center',
            textStyle:{
                color:'RED', //颜色
                fontSize:16,     //大小
                align:'right'   //水平对齐
                },
            },
    legend: {
        top: 'bottom',
        orient : 'vertical',
        x : 'right',
        textStyle: {
           color: '#fff',
           fontSize: 12
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '银牌',
            type: 'pie',
            radius : '70%',
            center: ['35%', '50%'],
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          //console.log(arg);
                          return arg.name +'\r\n'+arg.value+'枚 '
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 12,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: items_CHN_S
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--饼图 pie_items_CHN_C-->
<script type="text/javascript">
var chartDom = document.getElementById('pie_items_CHN_C');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        show:true,
        text: '铜牌',
        left:'center',
            textStyle:{
                color:'RED', //颜色
                fontSize:16,     //大小
                align:'left'   //水平对齐
                },
            },
    legend: {
        top: 'bottom',
        orient : 'vertical',
        x : 'right',
        textStyle: {
           color: '#fff',
           fontSize: 12
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '获奖情况2',
            type: 'pie',
            radius : '70%',
            center: ['35%', '50%'],
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          //console.log(arg);
                          return arg.name +'\r\n'+arg.value+'枚 '
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 12,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: items_CHN_C
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--饼图 pie_gold-->
<script type="text/javascript">
var kv = new Array();
kv = {{ pie_gold|safe }};
var test = new Array();
for (var logKey in kv) {
//将对应键值对取出存入test，logKey 为该字典的键
  test.push({value: kv[logKey], name: logKey});
}
var chartDom = document.getElementById('pie_gold');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        show:true,
        text: '金牌分布',
            textStyle:{
                color:'white', //颜色
                fontSize:16,     //大小
                align:'right'   //水平对齐
                },
            },
    legend: {
        top: 'bottom',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: 'fff',
           fontSize: 12
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '获奖情况2',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            roseType: 'area',
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          return arg.name +'\r\n'+ arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: test
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--饼图 pie_silver-->
<script type="text/javascript">
var kv = new Array();
kv = {{ pie_silver|safe }};
var test = new Array();
for (var logKey in kv) {
//将对应键值对取出存入test，logKey 为该字典的键
  test.push({value: kv[logKey], name: logKey});
}
var chartDom = document.getElementById('pie_silver');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        text: '银牌分布',
            textStyle:{
                color:'white', //颜色
                fontSize:16,     //大小
                align:'right'   //水平对齐
                },
            },
    legend: {
        top: 'bottom',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#fff',
           fontSize: 12
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '获奖情况2',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            roseType: 'area',
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          return arg.name +'\r\n'+ arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: test
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--饼图 pie_copper-->
<script type="text/javascript">
var kv = new Array();
kv = {{ pie_copper|safe }};
var test = new Array();
for (var logKey in kv) {
//将对应键值对取出存入test，logKey 为该字典的键
  test.push({value: kv[logKey], name: logKey});
}
var chartDom = document.getElementById('pie_copper');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        text: '铜牌分布',
            textStyle:{
                color:'white', //颜色
                fontSize:16,     //大小
                align:'right'   //水平对齐
                },
            },
    legend: {
        top: 'bottom',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#fff',
           fontSize: 12
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '获奖情况2',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            roseType: 'area',
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          return arg.name+'\r\n' + arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: test
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--饼图：性别比例2020-->
<script type="text/javascript">
var kv = new Array();
kv = {{ count_2020|safe }};
var test = new Array();
for (var logKey in kv) {
//将对应键值对取出存入test，logKey 为该字典的键
  test.push({value: kv[logKey], name: logKey});
}
var chartDom = document.getElementById('sex_history');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
            textStyle:{
                color:'#fff', //颜色
                fontSize:16,     //大小
                align:'right'   //水平对齐
                },
            },
    legend: {
        top: 'bottom',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#fff',
           fontSize: 12
        },
    },
    timeline: {
	            axisType: 'category',
	            // realtime: false,
	            // loop: false,
	            autoPlay: true,
	            // currentIndex: 2,
	            playInterval: 5000,
	            controlStyle: {
	                 position: 'bottom',
	             },
	            data: [
	                '2000','2004','2008','2012', '2016',
	            ],
	            textStyle:{
                    color:'white', //颜色
                    fontSize:16,     //大小
                    align:'right'   //水平对齐
                },
	            label: {
	                formatter : function(s) {
	                    return (new Date(s)).getFullYear();
	                }
	            }
	        },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '性别比例',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            roseType: 'angle',
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          return arg.name + '\r\n'+arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'red'
                          }
                      }
                  }
              },
            data: test
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--饼图：性别比例历史-->
<script type="text/javascript">
var kv = new Array();
kv = {{ count_2000|safe }};
var count_2000 = new Array();
for (var logKey in kv) {
//将对应键值对取出存入test，logKey 为该字典的键
  count_2000.push({value: kv[logKey], name: logKey});
}
kv = {{ count_2004|safe }};
var count_2004 = new Array();
for (var logKey in kv) {
//将对应键值对取出存入test，logKey 为该字典的键
  count_2004.push({value: kv[logKey], name: logKey});
}
kv = {{ count_2008|safe }};
var count_2008 = new Array();
for (var logKey in kv) {
//将对应键值对取出存入test，logKey 为该字典的键
  count_2008.push({value: kv[logKey], name: logKey});
}
kv = {{ count_2012|safe }};
var count_2012 = new Array();
for (var logKey in kv) {
//将对应键值对取出存入test，logKey 为该字典的键
  count_2012.push({value: kv[logKey], name: logKey});
}
kv = {{ count_2016|safe }};
var count_2016 = new Array();
for (var logKey in kv) {
//将对应键值对取出存入test，logKey 为该字典的键
  count_2016.push({value: kv[logKey], name: logKey});
}
var chartDom = document.getElementById('sex_history');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        text: '运动员性别比例',
        subtext:'数据源自统计',
            textStyle:{
                color:'white', //颜色
                fontSize:16,     //大小
                align:'right'   //水平对齐
                },
            },
    legend: {
        top: 'bottom',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#fff',
           fontSize: 12
        },
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    options:[
        {
            title:{text:"2000（数据源自统计）"},
            series: [
        {
            name: '性别比例',
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            roseType: 'angle',
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          return arg.name + '\r\n'+ arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: count_2000
            }
            ]
        },
        {
            title:{text:"2004（数据源自统计）"},
            series: [
        {
            name: '性别比例',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            roseType: 'angle',
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          return arg.name + '\r\n'+ arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: count_2004
            }
            ]
        },
        {
            title:{text:"2008（数据源自统计）"},
            series: [
        {
            name: '性别比例',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            roseType: 'angle',
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          return arg.name + '\r\n'+ arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: count_2008
            }
            ]
        },
        {
            title:{text:"2012（数据源自统计）"},
            series: [
        {
            name: '性别比例',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            roseType: 'angle',
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          return arg.name + '\r\n'+ arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: count_2012
            }
            ]
        },
        {
            title:{text:"2016（数据源自统计）"},
            series: [
        {
            name: '性别比例',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            roseType: 'angle',
            selectedMode:'single',
            itemStyle: {
                  normal: {
                      label: {
                          show:true,
                          formatter:function(arg){
                          return arg.name + '\r\n'+ arg.percent + '%'
                          },
                          textStyle: {
                              color:'white',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                      },
                    labelLine : {
                          lineStyle:{
                            color:'green'
                          }
                      }
                  }
              },
            data: count_2016
            }
            ]
        },
    ]
};
option && myChart.setOption(option);
</script>
<!--雷达图 radar_yang-->
<script type="text/javascript">
var chartDom = document.getElementById('yang');
var myChart = echarts.init(chartDom);
var option;
var data = {{heat_yang|safe}};
option = {
    legend: {
        data: ['生物参数'],
        top: 'top',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#FFF',
           fontSize: 10
        },
    },
    radar: {
        // shape: 'circle',
        indicator: [
            { name: '身高', max: 250},
            { name: '年龄', max: 62},
            { name: '体重', max: 100},
            { name: '热度', max: 9000},
        ],
        name: {
                textStyle: {
                    color: 'white',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
        radius: 80,
        startAngle: 90,
        splitNumber: 5,
    },
    series: [{
        name: '运动员参数分析',
        type: 'radar',
        data: [
            {
                value: data,
                name: '生物参数',
                label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        },
                        textStyle: {
                              color:'yellow',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                    },
            },
        ]
    }]
};
option && myChart.setOption(option);
</script>
<!--雷达图 radar_long-->
<script type="text/javascript">
var chartDom = document.getElementById('long');
var myChart = echarts.init(chartDom);
var option;
var data={{heat_long|safe}};
option = {
    legend: {
        data: ['生物参数'],
        top: 'top',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#FFF',
           fontSize: 10
        },
    },
    radar: {
        // shape: 'circle',
        indicator: [
            { name: '身高', max: 250},
            { name: '年龄', max: 62},
            { name: '体重', max: 100},
            { name: '热度', max: 9000},
        ],
        name: {
                textStyle: {
                    color: 'white',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
        radius: 80,
        startAngle: 90,
        splitNumber: 5,
    },
    series: [{
        name: '运动员参数分析',
        type: 'radar',
        data: [
            {
                value: data,
                name: '生物参数',
                label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        },
                        textStyle: {
                              color:'yellow',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                    },
            },
        ]
    }]
};
option && myChart.setOption(option);
</script>
<!--雷达图 radar_sha-->
<script type="text/javascript">
var chartDom = document.getElementById('sha');
var myChart = echarts.init(chartDom);
var option;
var data = {{heat_sha|safe}};
option = {
    legend: {
        data: ['生物参数'],
        top: 'top',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#FFF',
           fontSize: 10
        },
    },
    radar: {
        // shape: 'circle',
        indicator: [
            { name: '身高', max: 250},
            { name: '年龄', max: 62},
            { name: '体重', max: 100},
            { name: '热度', max: 9000},
        ],
        name: {
                textStyle: {
                    color: 'white',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
        radius: 80,
        startAngle: 90,
        splitNumber: 5,
    },
    series: [{
        name: '运动员参数分析',
        type: 'radar',
        data: [
            {
                value: data,
                name: '生物参数',
                label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        },
                        textStyle: {
                              color:'yellow',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                    },
            },
        ]
    }]
};
option && myChart.setOption(option);
</script>
<!--雷达图 radar_su-->
<script type="text/javascript">
var chartDom = document.getElementById('su');
var myChart = echarts.init(chartDom);
var option;
var data = {{heat_su|safe}};
option = {
    legend: {
        data: ['生物参数'],
        top: 'top',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#FFF',
           fontSize: 10
        },
    },
    radar: {
        // shape: 'circle',
        indicator: [
            { name: '身高', max: 250},
            { name: '年龄', max: 62},
            { name: '体重', max: 100},
            { name: '热度', max: 9000},
        ],
        name: {
                textStyle: {
                    color: 'white',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
        radius: 80,
        startAngle: 90,
        splitNumber: 5,
    },
    series: [{
        name: '运动员参数分析',
        type: 'radar',
        data: [
            {
                value: data,
                name: '生物参数',
                label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        },
                        textStyle: {
                              color:'yellow',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                    },
            },
        ]
    }]
};
option && myChart.setOption(option);
</script>
<!--雷达图 radar_xu-->
<script type="text/javascript">
var chartDom = document.getElementById('xu');
var myChart = echarts.init(chartDom);
var option;
var data = {{heat_xu|safe}};
option = {
    legend: {
        data: ['生物参数'],
        top: 'top',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#FFF',
           fontSize: 10
        },
    },
    radar: {
        // shape: 'circle',
        indicator: [
            { name: '身高', max: 250},
            { name: '年龄', max: 62},
            { name: '体重', max: 100},
            { name: '热度', max: 9000},
        ],
        name: {
                textStyle: {
                    color: 'white',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
        radius: 80,
        startAngle: 90,
        splitNumber: 5,
    },
    series: [{
        name: '运动员参数分析',
        type: 'radar',
        data: [
            {
                value: data,
                name: '生物参数',
                label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        },
                        textStyle: {
                              color:'yellow',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                    },
            },
        ]
    }]
};
option && myChart.setOption(option);
</script>
<!--雷达图 radar_qhc-->
<script type="text/javascript">
var chartDom = document.getElementById('qhc');
var myChart = echarts.init(chartDom);
var option;
var data = {{heat_qhc|safe}};
option = {
    legend: {
        data: ['生物参数'],
        top: 'top',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#FFF',
           fontSize: 10
        },
    },
    radar: {
        // shape: 'circle',
        indicator: [
            { name: '身高', max: 250},
            { name: '年龄', max: 62},
            { name: '体重', max: 100},
            { name: '热度', max: 9000},
        ],
        name: {
                textStyle: {
                    color: 'white',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
        radius: 80,
        startAngle: 90,
        splitNumber: 5,
    },
    series: [{
        name: '运动员参数分析',
        type: 'radar',
        data: [
            {
                value: data,
                name: '生物参数',
                label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        },
                        textStyle: {
                              color:'yellow',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                    },
            },
        ]
    }]
};
option && myChart.setOption(option);
</script>
<!--雷达图 radar_cm-->
<script type="text/javascript">
var chartDom = document.getElementById('cm');
var myChart = echarts.init(chartDom);
var option;
var data = {{heat_cm|safe}};
option = {
    legend: {
        data: ['生物参数'],
        top: 'top',
        orient : 'vertical',
        x : 'left',
        textStyle: {
           color: '#FFF',
           fontSize: 10
        },
    },
    radar: {
        // shape: 'circle',
        indicator: [
            { name: '身高', max: 250},
            { name: '年龄', max: 62},
            { name: '体重', max: 100},
            { name: '热度', max: 9000},
        ],
        name: {
                textStyle: {
                    color: 'white',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
        radius: 80,
        startAngle: 90,
        splitNumber: 5,
    },
    series: [{
        name: '运动员参数分析',
        type: 'radar',
        data: [
            {
                value: data,
                name: '生物参数',
                label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        },
                        textStyle: {
                              color:'yellow',
                              fontSize: 10,
                              fontWeight:'bolder'
                          }
                    },
            },
        ]
    }]
};
option && myChart.setOption(option);
</script>
<!--动态bar图-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var data = [];
for (let i = 0; i < 5; ++i) {
    data.push(Math.round(Math.random() * 200));
}
option = {
    xAxis: {
        max: 'dataMax',
    },
    yAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E'],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300,
        max: 5 // only the largest 3 bars will be displayed
    },
    series: [{
        realtimeSort: true,
        name: 'X',
        type: 'bar',
        data: data,
        label: {
            show: true,
            position: 'right',
            valueAnimation: true
        }
    }],
    legend: {
        show: true
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
};
function run () {
    var data = option.series[0].data;
    for (var i = 0; i < data.length; ++i) {
        if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 2000);
        }
        else {
            data[i] += Math.round(Math.random() * 200);
        }
    }
    myChart.setOption(option);
}
setTimeout(function() {
    run();
}, 0);
setInterval(function () {
    run();
}, 3000);
if (option && typeof option === 'object') {
    myChart.setOption(option);
}
        </script>
<!--散点图：运动员身高体重-->
<script type="text/javascript">
var chartDom = document.getElementById('wh');
var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
        subtext: 'Data from: Heinz 2003',
        textStyle:{
            color:'yellow', //颜色
            fontSize:20,     //大小
            align:'right'   //水平对齐
        },
    },
    grid: {
        left: '3%',
        right: '7%',
        bottom: '7%',
        containLabel: true
    },
    tooltip: {
        // trigger: 'axis',
        showDelay: 0,
        formatter: function (params) {
            if (params.value.length > 1) {
                return params.seriesName + ' :<br/>'
                + params.value[0] + 'cm '
                + params.value[1] + 'kg ';
            }
            else {
                return params.seriesName + ' :<br/>'
                + params.name + ' : '
                + params.value + 'kg ';
            }
        },
        axisPointer: {
            show: true,
            type: 'cross',
            lineStyle: {
                type: 'dashed',
                width: 1
            }
        }
    },
    toolbox: {
        feature: {
            dataZoom: {},
            brush: {
                type: ['rect', 'polygon', 'clear']
            }
        }
    },
    brush: {
    },
    legend: {
        data: ['Female', 'Male'],
        left: 'center',
        bottom: 10
    },
    xAxis: [
        {
            type: 'value',
            scale: true,
            axisLabel: {
                formatter: '{value} cm'
            },
            splitLine: {
                show: false
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            scale: true,
            axisLabel: {
                formatter: '{value} kg'
            },
            splitLine: {
                show: false
            }
        }
    ],
    series: [
        {
            name: 'Female',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
            ],
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Female Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: '平均值'},
                    { xAxis: 160 }
                ]
            }
        },
        {
            name: 'Male',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
                [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
                [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
                [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
                [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
            ],
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Male Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: 'Average'},
                    { xAxis: 170 }
                ]
            }
        }
    ]
};
option && myChart.setOption(option);
</script>
<!--身高体重散点图：timeline-->
<script type="text/javascript">
var chartDom = document.getElementById('wh');
var myChart = echarts.init(chartDom);
var option;
var data_2000_f={{data_2000_f|safe}};
var data_2004_f={{data_2004_f|safe}};
var data_2008_f={{data_2008_f|safe}};
var data_2012_f={{data_2012_f|safe}};
var data_2016_f={{data_2016_f|safe}};
var data_2000_m={{data_2000_m|safe}};
var data_2004_m={{data_2004_m|safe}};
var data_2008_m={{data_2008_m|safe}};
var data_2012_m={{data_2012_m|safe}};
var data_2016_m={{data_2016_m|safe}};
option = {
    timeline: {
	            axisType: 'category',
	            // realtime: false,
	            // loop: false,
	            autoPlay: true,
	            // currentIndex: 2,
	            playInterval: 6000,
	            controlStyle: {
	                 position: 'bottom',
	             },
	            data: [
	                '2000','2004','2008','2012', '2016',
	            ],
	            label: {
	                textStyle: {
                        color: '#f47920',  //更改坐标轴文字颜色
                        fontSize : 14      //更改坐标轴文字大小
                    },
	                formatter : function(s) {
	                    return (new Date(s)).getFullYear();
	                }
	            }
	        },
    title: {
        text: 'Male and female height and weight distribution',
        subtext: 'Data from: Heinz 2000'
    },
    grid: {
        left: '2%',
        right: '2%',
        bottom: '7%',
        containLabel: true
    },
    tooltip: {
        // trigger: 'axis',
        showDelay: 0,
        formatter: function (params) {
            if (params.value.length > 1) {
                return params.seriesName + ' :<br/>'
                + params.value[0] + 'cm '
                + params.value[1] + 'kg ';
            }
            else {
                return params.seriesName + ' :<br/>'
                + params.name + ' : '
                + params.value + 'kg ';
            }
        },
        axisPointer: {
            show: true,
            type: 'cross',
            lineStyle: {
                color:'yellow',
                type: 'dashed',
                width: 1
            }
        }
    },
    toolbox: {
        feature: {
            dataZoom: {},
            brush: {
                type: ['rect', 'polygon', 'clear']
            }
        }
    },
    brush: {
    },
    legend: {
        data: ['Female', 'Male'],
        left: 'center',
        bottom: 10
    },
    options:[
    {
            title : {text: '2000'},
            xAxis: [
        {
            type: 'value',
            scale: true,
            axisLabel: {
                textStyle:{
                color:'white',
                },
                formatter: '{value} cm'
            },
            splitLine: {
                show: false
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            scale: true,
            textStyle:{
                color:'white',
            },
            axisLabel: {
                textStyle:{
                color:'white',
                },
                formatter: '{value} kg'
            },
            splitLine: {
                show: false
            }
        }
    ],
            series: [
        {
            name: 'Female',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data: data_2000_f,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Female Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: '平均值'},
                    { xAxis: 160 }
                ]
            }
        },
        {
            name: 'Male',
            color:'#b2d235',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data: data_2000_m,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Male Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: 'Average'},
                    { xAxis: 170 }
                ]
            }
        }
    ]
        },
        {
            title : {text: '2004'},
            series: [
        {
            name: 'Female',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data: data_2004_f,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Female Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: '平均值'},
                    { xAxis: 160 }
                ]
            }
        },
        {
            name: 'Male',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data: data_2004_m,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Male Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: 'Average'},
                    { xAxis: 170 }
                ]
            }
        }
    ]
        },
        {
            title : {text: '2008'},
            series: [
        {
            name: 'Female',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data: data_2008_f,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Female Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: '平均值'},
                    { xAxis: 160 }
                ]
            }
        },
        {
            name: 'Male',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data: data_2008_m,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Male Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: 'Average'},
                    { xAxis: 170 }
                ]
            }
        }
    ]
        },
        {
            title : {text: '2012'},
            series: [
        {
            name: 'Female',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data: data_2012_f,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Female Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: '平均值'},
                    { xAxis: 160 }
                ]
            }
        },
        {
            name: 'Male',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data: data_2012_m,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Male Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: 'Average'},
                    { xAxis: 170 }
                ]
            }
        }
    ]
        },
        {
            title : {text: '2016'},
            series: [
        {
            name: 'Female',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data:  data_2016_f,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Female Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: '平均值'},
                    { xAxis: 160 }
                ]
            }
        },
        {
            name: 'Male',
            type: 'scatter',
            emphasis: {
                focus: 'series'
            },
            data:  data_2016_m,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Male Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: 'Average'},
                    { xAxis: 170 }
                ]
            }
        }
    ]
        },

        ],
};
option && myChart.setOption(option);
</script>
</html>